<template>
    <div>
        <el-row  v-loading="tableLoading">
            <el-col :span="12">
    <el-form ref="elForm" 
           :model="formData"
           :rules="rules"
           size="medium"
            label-suffix="："
            class="xfjsonform"
    label-width="20%">  
               <!--  -->
    <h3 style="margin-top:0" class="form-section-title">Redis服务器</h3>
<!--  -->
    <el-form-item label="链接参数" prop="redisStr">
   
    <el-input v-model="formData.redisStr" placeholder="包括IP@PORT@USERNAME@PW" clearable :style="{width: '90%'}">
        </el-input>
      
    </el-form-item>
<!--  -->
    <!-- <el-form-item label="检测间隔" prop="redisTime">   
    <el-input v-model="formData.redisTime" placeholder="时间秒" clearable :style="{width: '50%'}">
        </el-input>
    </el-form-item> -->
<!--  -->
      <el-form-item label="操作" prop="redisResult">   
         <el-button   @click="saveRedis">保存设置</el-button>      
    </el-form-item>
    <!--  -->
<h3 style="margin-top:0" class="form-section-title">Mysql服务器</h3>

  <el-form-item label="链接参数" prop="mysqlIP">   
    <el-input v-model="formData.mysqlIP" placeholder="包括IP@PORT" clearable :style="{width: '90%'}">
        </el-input>      
    </el-form-item>
    <!--  -->
     <el-form-item label="用户名" prop="mysqlUser">   
    <el-input v-model="formData.mysqlUser" placeholder="登录服务器用户名" clearable :style="{width: '90%'}">
        </el-input>      
    </el-form-item>
    <el-form-item label="密码" prop="mysqlPass">   
    <el-input v-model="formData.mysqlPass" placeholder="登录服务器密码" clearable :style="{width: '90%'}">
        </el-input>      
    </el-form-item>
    <!--  -->
    <!-- <el-form-item label="检测间隔" prop="mysqlTime">   
    <el-input v-model="formData.mysqlTime" placeholder="时间秒" clearable :style="{width: '50%'}">
        </el-input>            
    </el-form-item>  -->
      <el-form-item label="操作" prop="mysqlResult">   
         <el-button   @click="saveMysql">保存设置</el-button>         
    </el-form-item>
    <!--  -->
 <!--  -->
<h3 style="margin-top:0" class="form-section-title">Pgsql服务器</h3>

  <el-form-item label="链接参数" prop="PgsqlIP">   
    <el-input v-model="formData.PgsqlIP" placeholder="包括IP@PORT" clearable :style="{width: '90%'}">
        </el-input>      
    </el-form-item>
    <!--  -->
     <el-form-item label="用户名" prop="PgsqlUser">   
    <el-input v-model="formData.PgsqlUser" placeholder="登录服务器用户名" clearable :style="{width: '90%'}">
        </el-input>      
    </el-form-item>
    <el-form-item label="密码" prop="PgsqlPass">   
    <el-input v-model="formData.PgsqlPass" placeholder="登录服务器密码" clearable :style="{width: '90%'}">
        </el-input>      
    </el-form-item>
    <!--  -->
    <!-- <el-form-item label="检测间隔" prop="PgsqlTime">   
    <el-input v-model="formData.PgsqlTime" placeholder="时间秒" clearable :style="{width: '50%'}">
        </el-input>      
    </el-form-item> -->
      <el-form-item label="操作" prop="PgsqlResult">   
         <el-button   @click="savePgsql">保存设置</el-button>        
    </el-form-item>
    <!--  -->
    <!--  -->

    </el-form>
            </el-col>
            <el-col :span="12">
      <el-form ref="elForm" 
           :model="formData"           
           size="medium"
            label-suffix="："
            class="xfjsonform"
    label-width="20%">                
                <h3 style="margin-top:0" class="form-section-title">Redis检测</h3>
<el-form-item label="操作"> 
        <el-button   @click="testRedis" v-loading="formData.redisResult">点击检测</el-button>
        <!-- ping 检测 -->
        <el-tag v-if="formData.redisPing>0" type="success"> Ping 成功</el-tag>
        <el-tag v-if="formData.redisPing==0" type="info">Ping 失败</el-tag>
        <!-- 链接检测 -->
        <el-tag v-if="formData.redisStatus==1" type="success"> Redis 链接正常</el-tag>
        <el-tag v-if="formData.redisStatus==0" type="info"> Redis 链接失败</el-tag>
</el-form-item>
                 <h3 style="margin-top:0" class="form-section-title">Mysql检测</h3>
<el-form-item label="操作"> 
        <el-button   @click="testMysql" v-loading="formData.mysqlResult">点击检测</el-button>
          <!-- ping 检测 -->
        <el-tag v-if="formData.mysqlPing>0" type="success"> Ping 成功</el-tag>
        <el-tag v-if="formData.mysqlPing==0" type="info">Ping 失败</el-tag>
        <!-- 链接检测 -->
        <el-tag v-if="formData.mysqlStatus==1" type="success"> Mysql 链接正常</el-tag>
        <el-tag v-if="formData.mysqlStatus==0" type="info"> Mysql 链接失败</el-tag>
</el-form-item>
                  <h3 style="margin-top:0" class="form-section-title">Pgsql检测</h3>

                  <el-form-item label="操作"> 
        <el-button   @click="testPgsql" v-loading="formData.PgsqlResult">点击检测</el-button>

           <!-- ping 检测 -->
        <el-tag v-if="formData.PgsqlPing>0" type="success"> Ping 成功</el-tag>
        <el-tag v-if="formData.PgsqlPing==0" type="info">Ping 失败</el-tag>
        <!-- 链接检测 -->
        <el-tag v-if="formData.PgsqlStatus==1" type="success"> Pgsql 链接正常</el-tag>
        <el-tag v-if="formData.PgsqlStatus==0" type="info"> Pgsql 链接失败</el-tag>

</el-form-item>
<!--  -->
  <h3 style="margin-top:0" class="form-section-title">定时自动检测所有</h3>

  <el-form-item label="间隔（秒）" prop="autoTime">   
    <el-input v-model="autoTime" placeholder="时间秒" clearable :style="{width: '50%'}">
        </el-input>      
    </el-form-item>
<el-form-item label="操作"> 
        <el-button v-if="!timemer"  @click="setTimerAuto"> 开始检测</el-button>
        <el-button v-if="timemer"  @click="endTimerAuto"> 结束检测 </el-button>
        <el-tag> 倒计时   {{hour}} :  {{minute}} ： {{seconds}} </el-tag>
             
</el-form-item>
  <!--  -->
      </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script> 
export default {
    components: { },
    props:[],
    data: function(){
        return {
            tableLoading: false,
            formData :{
                redisStr: undefined,
                redisTime:60,
                redisResult: undefined,
                redisStatus:undefined,
                redisPing: undefined,
                mysqlIP:undefined,
                mysqlUser: undefined,
                mysqlPass:undefined,
                mysqlTime:60,
                mysqlResult: undefined,
                mysqlStatus:undefined,
                mysqlPing: undefined,
                PgsqlIP: undefined,
                PgsqlUser: undefined,
                PgsqlPass: undefined,
                PgsqlTime: 60,
                PgsqlResult: undefined,
                PgsqlStatus: undefined,
                PgsqlPing: undefined,
                

            },
            // 倒计时检测
            autoTime: 60,
            hour:'00',
            minute: '00',
            seconds: '00',
            timemer: undefined,
            // 规则
            rules:{

            }
        }
    },
    created:function(){
        PlaceAPI.xfdetectionGet().then(ret=>{
            for(let k in ret){
                for( let f in ret[k]){
                    this['formData'][f] = ret[k][f];
                }
            }
        })
    },
    methods:{
        testRedis(){
            if(!this.formData.redisStr){
                this.$message({message: "请设置链接redis服务器参数", type: "error"});
                return;
            }
            this.formData.redisStatus = undefined;
            this.formData.redisResult = true;
             this.formData.redisPing = undefined;
            let param = this.formData;
            param.testtype = "redis";
            param.ipstr = param.redisStr;
            PlaceAPI.xfpingTesting(param).then(ret =>{
                this.formData.redisPing = parseInt(ret)
            })
            PlaceAPI.xfdetectionTesting(param).then( ret => {
                 this.formData.redisStatus = parseInt(ret);
                 this.formData.redisResult = false;
            }, e=>{ //错误处理，有可能服务器端php 未安装redis扩展报错。
                if(e.hasOwnProperty('message')){
                    this.$message({message: e.message , type: "error"});                    
                }
                 this.formData.redisStatus = parseInt(0);
                 this.formData.redisResult = false;
            })
        },
        testMysql(){
            if(!this.formData.mysqlIP){
                this.$message({message: "请设置链接Mysql服务器参数", type: "error"});
                return;
            }
            this.formData.mysqlStatus = undefined;
            this.formData.mysqlResult = true;
            this.formData.mysqlPing  = undefined;
            let param = this.formData;
            param.testtype = "mysql";
            param.ipstr = param.mysqlIP;
            PlaceAPI.xfpingTesting(param).then(ret =>{
                this.formData.mysqlPing = parseInt(ret)
            })
            PlaceAPI.xfdetectionTesting(param).then( ret => {
                 this.formData.mysqlStatus = parseInt(ret);
                 this.formData.mysqlResult = false;
            }, e=>{
                if(e.hasOwnProperty('message')){
                    this.$message({message: e.message , type: "error"});                    
                }
                 this.formData.mysqlStatus = parseInt(0);
                 this.formData.mysqlResult = false;
            })
        },
        testPgsql(){
             if(!this.formData.PgsqlIP){
                this.$message({message: "请设置链接 Pgsql 服务器参数", type: "error"});
                return;
            }
            this.formData.PgsqlStatus = undefined;
            this.formData.PgsqlResult = true;
            this.formData.PgsqlPing  = undefined;
            let param = this.formData;
            param.testtype = "pgsql";
            param.ipstr = param.PgsqlIP;
            PlaceAPI.xfpingTesting(param).then(ret =>{
                this.formData.PgsqlPing = parseInt(ret)
            })
            PlaceAPI.xfdetectionTesting(param).then( ret => {
               
                 this.formData.PgsqlStatus = parseInt(ret);
                 this.formData.PgsqlResult = false;
            }, e=>{
                if(e.hasOwnProperty('message')){
                    this.$message({message: e.message , type: "error"});                    
                }
                 this.formData.PgsqlStatus = parseInt(0);
                 this.formData.PgsqlResult = false;
            })
        },
        // 保存redis服务器链接参数
        saveRedis: function(){
            PlaceAPI.xfdetection({
                plugin: 'redis_detection',
                redisStr: this.formData.redisStr,
                redisTime: this.formData.redisTime,
                savekeys: "redisStr,redisTime",//根据这个值存在对应的
            }).then(ret => {
                 this.$message({message: "成功保存服务器参数", type: "success"});
            })
        },
        saveMysql: function(){
            PlaceAPI.xfdetection({
                plugin: 'mysql_detection',
                mysqlIP: this.formData.mysqlIP,
                mysqlUser: this.formData.mysqlUser,
                mysqlPass: this.formData.mysqlPass,
                mysqlTime: this.formData.mysqlTime,
                savekeys: "mysqlIP,mysqlUser,mysqlPass,mysqlTime",//根据这个值存在对应的
            }).then(ret => {
               this.$message({message: "成功保存服务器参数", type: "success"});
            })
        },
        savePgsql: function(){
            PlaceAPI.xfdetection({
                plugin: 'pgsql_detection',
                PgsqlIP: this.formData.PgsqlIP,
                PgsqlUser: this.formData.PgsqlUser,
                PgsqlPass: this.formData.PgsqlPass,
                PgsqlTime: this.formData.PgsqlTime,
                savekeys: "PgsqlIP,PgsqlUser,PgsqlPass,PgsqlTime",//根据这个值存在对应的
            }).then(ret => {
                this.$message({message: "成功保存服务器参数", type: "success"});
            })
        },
        // 开始倒计时检测
        setTimerAuto(){
            
               // ReportApi.setTimeData(this, this.autoTime  * 1000);
            this.timemer = 1;		
            this.autoStart();       
			  
        },
        autoStart(){
            let _this = this;
            ReportApi.timeCountDown( _this,  _this.autoTime  * 1000,
                        function(){
                            _this.testRedis(); //检测redi
                            _this.testMysql();//检测mysql
                            _this.testPgsql();//检测pgsql
                            _this.autoStart();  //重新倒计时
                        });
        },
        //结束倒计时
        endTimerAuto(){
             this.timemer = undefined;	
            clearTimeout(ReportApi.timemer) ;
        },
    }
}

</script>